<template>
	<view class="container">
		<view class="kuang">
			<image class="bj" src="/static/组 6.png" mode=""></image>
			<text class="title">卡券任务</text>
		</view>
		<view class="jiantou" @click="goBack"></view>
		<!-- 新增优惠券按钮 -->
		<view class="add-coupon-btn" @click="addCoupon">
			<view class="add-icon">+</view>
			<text class="add-text">新增优惠券</text>
		</view>

		<!-- 状态标签 -->
		<view class="bai">
			<view class="status-tabs">
				<view class="tabl">进行中</view>
				<view class="tabr">已结束</view>
			</view>
		</view>
		<!-- 卡券列表 -->
		<!-- <view class="coupon-list">
			<view class="coupon-item" v-for="item in 3" :key="item">
				<view class="coupon-left">
					<view class="coupon-condition">满200元可用</view>
					<view class="a">
						<view class="aa">¥</view>
						<view class="coupon-amount">20</view>
					</view>
				</view>
				<view class="coupon-right">
					<view class="coupon-name">优惠券名称:新用户专享体验券</view>
					<view class="coupon-validity">有效期:2020.3.18-2023.4.18</view>
					<view class="coupon-limit">每人限领一张</view>
				</view>
			</view>
		</view> -->
		<!-- 过期 -->
		<view class="coupon-list-gq">
			<view class="coupon-item-gq" v-for="item in 3" :key="item">
				<view class="coupon-left-gq">
					<view class="coupon-condition">满200元可用</view>
					<view class="a">
						<view class="aa">¥</view>
						<view class="coupon-amount">20</view>
					</view>
				</view>
				<view class="coupon-right-gq">
					<view class="coupon-name-gq">优惠券名称:新用户专享体验券</view>
					<view class="coupon-validity-gq">有效期:2020.3.18-2023.4.18</view>
					<view class="jieshu">
						<view class="coupon-limit-gq">每人限领一张</view>
						<image class="tu" src="/static/1a7cdef7e44d372cd260a0483630ee26b37931b52ad2-qFaTDV@3x.png"
							mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>



</template>

<script setup>
	function goBack() {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background: #f5f5f5;
	}

	.bj {
		position: absolute;
		z-index: 1;
		width: 750rpx;
		height: 430rpx;
	}

	.kuang {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 35rpx;
		position: absolute;
		z-index: 2;
		color: white;
		margin-top: 60rpx;
	}

	.jiantou {
		position: absolute;
		z-index: 2;
		width: 30rpx;
		height: 30rpx;
		border: 5rpx solid white;
		border-top: none;
		border-left: none;
		transform: rotate(135deg);
		margin-top: 60rpx;
		margin-left: 30rpx;
	}

	/* 新增优惠券按钮 */
	.add-coupon-btn {
		position: relative;
		z-index: 2;
		width: 660rpx;
		height: 80rpx;
		margin-top: 140rpx;
		margin-left: 45rpx;
		background: white;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-icon {
		font-size: 40rpx;
		color: #2277f3;
		margin-right: 15rpx;
		font-weight: bold;
	}

	.add-text {
		font-size: 32rpx;
		color: #2277f3;
		font-weight: 500;
	}

	/* 状态标签 */
	.bai {
		position: relative;
		z-index: 2;
		margin-left: 20rpx;
		margin-top: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		width: 710rpx;
		height: 200rpx;
		background-color: white;
	}

	.status-tabs {
		position: relative;
		z-index: 2;
		display: flex;
		background: white;
		border-radius: 40rpx;
		padding: 40rpx 0;
	}

	.tabl {
		width: 170rpx;
		height: 70rpx;
		border-radius: 35rpx 0 0 35rpx;
		background-color: #2277f3;
		color: white;
		font-size: 33rpx;
		line-height: 70rpx;
		margin-left: 180rpx;
		padding-left: 40rpx;

	}

	.tabr {
		width: 170rpx;
		height: 70rpx;
		border-radius: 0 35rpx 35rpx 0;
		background-color: #f3f3f3;
		color: #2277f3;
		font-size: 33rpx;
		line-height: 70rpx;
		padding-left: 30rpx;
	}

	/* 卡券列表 */
	.coupon-list {
		position: relative;
		z-index: 2;
		padding: 20rpx;
		margin-top: -80rpx;
	}

	.coupon-list-gq {
		position: relative;
		z-index: 2;
		padding: 20rpx;
		margin-top: -80rpx;
	}

	.coupon-item {
		display: flex;
		width: 650rpx;
		height: 220rpx;
		margin-left: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
	}

	.coupon-item-gq {
		display: flex;
		width: 650rpx;
		height: 220rpx;
		margin-left: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
	}

	.coupon-left {
		width: 190rpx;
		height: 220rpx;
		background: linear-gradient(135deg, #ff9577, #ff6a00);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: white;
		padding: 20rpx;
	}

	.coupon-left-gq {
		width: 190rpx;
		height: 220rpx;
		background: #ffbb99;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: white;
		padding: 20rpx;
	}

	.coupon-condition {
		font-size: 25rpx;
		margin-bottom: 15rpx;
		text-align: center;
	}

	.a {
		display: flex;
	}

	.aa {
		font-size: 35rpx;
		margin-top: 35rpx;
		margin-right: 10rpx;
	}

	.coupon-amount {
		font-size: 70rpx;
		font-weight: bold;
	}

	.coupon-right {
		flex: 1;
		width: 160rpx;
		height: 220rpx;
		background: #fff3eb;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.coupon-right-gq {
		flex: 1;
		width: 160rpx;
		height: 220rpx;
		background: #f3f3f3;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.jieshu {
		display: flex;
		justify-content: space-between;
	}

	.tu {
		width: 140rpx;
		height: 70rpx;
		margin-top: -15rpx;
	}


	.coupon-name {
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
		margin-top: 7rpx;
	}

	.coupon-name-gq {
		font-size: 26rpx;
		color: #9a9a9a;
		font-weight: bold;
		margin-top: 7rpx;
	}

	.coupon-validity {
		font-size: 24rpx;
		margin-top: -30rpx;
		color: #666;
	}

	.coupon-validity-gq {
		font-size: 24rpx;
		margin-top: -30rpx;
		color: #9a9a9a;
	}

	.coupon-limit {
		font-size: 22rpx;
		color: #999;
		margin-top: 10rpx;
		margin-bottom: 50rpx;
	}

	.coupon-limit-gq {
		font-size: 22rpx;
		color: #9a9a9a;
		margin-top: 10rpx;
		margin-bottom: 50rpx;
	}
</style>